<template>
  <a-card :bordered="false" class="relative" :class="{ 'is-template': isTemplate, 'footer-h': footerH }">
    <Teleport to="#footer-space" :disabled="!footer" v-if="isMounted">
      <div :style="{ height: footerHeight }"></div>
    </Teleport>
    <slot name="title">
      <table-toolbar v-show="show" v-if="showTitle" :title="baseTitle || route.meta.title" />
    </slot>
    <slot></slot>
    <slot name="footer"></slot>
  </a-card>
</template>

<script lang="ts" setup name="BaseContainer">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import TableToolbar from '@/components/table-toolbar/index.vue'

interface Props {
  footer?: boolean
  footerHeight?: string
  baseTitle?: string
  showTitle?: boolean
  isTemplate?: boolean
  footerH?: boolean
  show?: boolean
}

withDefaults(defineProps<Props>(), {
  footer: false,
  showTitle: true,
  footerHeight: '0px',
  baseTitle: '',
  isTemplate: false,
  show: true
})

const route = useRoute()
const isMounted = ref(false)

onMounted(() => {
  isMounted.value = true
})
</script>

<style lang="scss" scoped>
.is-template {
  background: transparent;

  & > ::v-deep(.ant-card-body) {
    padding: 0;
  }
}

.footer-h {
  & > ::v-deep(.ant-card-body) {
    padding-bottom: 80px !important;
  }
}
</style>
